<template>
  <!-- 
      vue3中在template模板中可以不用设置这个根元素
      因为vue3新推出了一个Fragment,可以不用设置根元素
   -->
   <h1>Vue3欢迎您！</h1>
   <h1>个人简介</h1>
   <div>姓名:{{name}}</div>
   <div>年龄:{{age}}</div>
   <div>
      <button @click="updateInfo">修改信息</button>
   </div>
</template>

<script>
/* 
  1.组合式API的入口是一个setup函数
  2.setup，响应式数据和非响应式数据、计算属性、watch、生命周期钩子函数都是写在setup函数中的
  在vue3中没有this
  在setup中定义的变量是非响应式数据，数据变了，页面不会自动更新
  在vue3中在setup和data中都定义的数据，setup中定义的数据优先级高于data中定义数据
  3.关于setup函数的返回值，有两种
  1）返回一个对象
  2) 返回一个渲染函数:自定义内容
  4.关于vue2和vue3写法不能混写的问题
  1）能混写，但是强烈不建议混写
  2）setup优先级高于data中的数据
*/

import {h} from 'vue'
export default {
  name:'App',
  data(){
    return{
      name:'Giles',
      age:38
    }
  },
  setup(){
     let name="zhaijizhe"
     let age=39
     const updateInfo=()=>{
       console.log('name:',name);
       console.log('age',age);
       name="Jerry"
       age=33
       console.log('----------------');
       console.log('name:',name);
       console.log('age',age);
     }
     return {name,age,updateInfo}
    // return ()=>h("h1","Giles")
  }
}
</script>

<style>

</style>